<template>
	<!-- 邀请 -->
	<view class="pr pb100">
		<!-- 顶部占位 -->
		<view class="header-bar"></view>
		<view class="flex row-between pl40 pr40 topbox">
			<view class="" @click="gotohome">
				<image src="~@/static/img/index/backW.png" class="w28 h32"></image>
			</view>
			<view class="fs30">邀请好友</view>
			<view class="fs24" @click="$jump('/pages/my/myTeam/myTeam')">
				邀请记录
			</view>
		</view>
		<!-- 邀请好友图标盒子 -->
		<view class="mt44 mb30">
			<image src="~@/static/img/index/yaoqinghaoyou.png" class="w-max h480"></image>
		</view>
		<!-- 等级盒子 -->
		<view class="mr20 ml20 bannerbox pt74 pb50">   
			<view :class="['bannerboxItem','flex','col-center','mb100',i%2==0?'ml46':'ml126']" v-for="(item,i) in data" :key='i'>
				<!-- 等级图片盒子 -->
				<view :class="i%2==0? 'gradeBox-l':'gradeBox-r'">
					<image :src="$baseUrl+item.name_image" class="h88 w88"></image>
				</view>
				<!-- 中间文字盒子 -->
				<view class="textC flex1 ml120">
					<text>邀请{{item.deduction}}人</text>
					<view class="mt24">
						<text>享受佣金范围:</text><text class="price">￥{{item.price}} -￥{{item.price_end}}</text>
					</view>
				</view>
				<!-- 右边图片的盒子 -->
				<view :class="i%2==0? 'iconBox-l':'iconBox-r'">
					<image :src="$baseUrl+item.image" class="w156 h180"></image>
				</view>
			</view>
		</view>
	 <!-- //等级盒子 -->
	 
	 <!-- 邀请流程盒子 -->
		<view class="mr20 ml20 mt26">
			<image src="~@/static/img/index/liucheng.png" class="w-max h244"></image>
		</view>
	 <!-- //邀请流程盒子 -->
	 
	 <!-- 底部按钮盒子 -->
		<!-- <view class="btnfooter mr60 ml60 text-center mt56">立即邀请</view> -->
	 <!-- //底部按钮盒子 -->
	</view>
</template>

<script>
	export default {
		name:'invitation',
		data() {
			return {
				data:[]
			};
		},
		onLoad() {
			this.userlevel()
		},
		methods: {
			userlevel() {
				this.$api.Userlevel().then(res => {
					this.data = res.data
				})
			},
			gotohome() {
				uni.switchTab({
					url:'/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #000036;
	}
	.topbox {
		color: #FFFFFF;
	}
	.bannerbox {
		background: #0E0A51;
		border-radius: 6rpx;
		.bannerboxItem {
			position: relative;
			width: 540rpx;
			height: 140rpx;
			background: linear-gradient(90deg, #5770FC, #4145D8, #5770FC);
			box-shadow: 0px 6rpx 0px 0px #1B1177, 0px 2rpx 0px 0px rgba(134, 150, 255, 0.66);
			border-radius: 30rpx;
			.gradeBox-l {
				position: absolute;
				left: 26rpx;
			}
			.gradeBox-r {
				position: absolute;
				right: 16rpx;
			}
			.iconBox-l{
				position: absolute;
				right: 0;
				transform: translateX(50%);
			}
			.iconBox-r {
				position: absolute;
				left: 0;
				transform: translateX(-50%);
			}
			.textC {
				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.price {
					color: #FFF776;
					font-weight: 700;
				}
			}
		}
	}
	.btnfooter {
		height: 80rpx;
		background: linear-gradient(90deg, #F85E79, #ED2659, #FC5D79);
		box-shadow: 0px 6rpx 0px 0px #C71545, 0px 1px 0px 0px #F97C82;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
